<template>
  <div class="product">
    <!--Corporate Page Banner Section-->
    <div
      class="co-page-banner-section section"
      data-page-title="about us"
      style="background-image: url(img/page-banner-bg.jpg)"
    >
      <div class="container-fluid">
        <div class="row">
          <div class="co-page-banner text-center col-xs-12">
            <h1>产品列表</h1>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
            <div class="col-xs-12">
                <div class="co-section-title-1 text-center mb-110">
       
                    <p>各种流量计简介</p>
                </div>
            </div>
        </div>
    <div class="productlist">
      <productInfo
        v-for="(item, index) in filteredDataList"
        :dataEntity="item"
        :key="index"
        class="productInfo"
      ></productInfo>
    </div>
  </div>
</template>
<script>
import productInfo from "@/components/productInfo.vue";
import {productDataList} from "../../public/data.js"
export default {
  name: "product",
  computed: {
    filteredDataList() {
      if (this.type == 0) {
        return this.dataList;
      } else {
        return this.dataList.filter((item) => {
          return item.type == this.type;
        });
      }
    },
  },
  data() {
    return {
      type: 0,
      dataList:[]
    };
  },
  // 注册组件
  components: { productInfo },
  methods: {
    init() {
      this.dataList=productDataList
      this.type = this.$route.query.type;
      
    },
  },
  created() {
    // 监听
    this.init();
  },
  beforeUpdate() {},
  // 挂载前状态(里面是操作)
  beforeMount() {},
};
</script>
<style lang="scss">
.product {
  .productlist {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    height: auto;
    img {
    }
    .productInfo {
      width: 22%; /* 或者使用具体的宽度 */
      flex-grow: 0;
      flex-shrink: 0;
      margin: 10px; /* 为了在子元素之间添加间隔 */
      height: auto;
    }
  }
}
</style>
